<template>
  <van-sticky @change="change" :container="container">
    <div class="sub-table-healder" :class="{'sub-table-healder-fixed': isFixed}">
      <div style="display: flex; align-items: center; justify-content: center">
        <div style="flex: 1">
          <van-icon name="arrow-up" class="arrow-icon" :class="{'arrow-icon-expanded': expanded}"/>
          {{ subForm?.formName }}
        </div>
        <div style="width: fit-content" class="sub-table-healder-button-wrapper">
          <van-button @click="addNew" icon="plus" size="small" v-if="showAddNewButton"/>
          <van-button @click="clear" icon="delete" size="small" v-if="clearButton"/>
        </div>
      </div>
    </div>
  </van-sticky>
</template>
<script setup>
import {createProps} from '@/utils';
import {computed, shallowRef} from 'vue';

defineOptions({name: 'SubTableHealder'});

const isFixed = shallowRef(false);
const props = defineProps({
  config: createProps(Object, () => undefined),
  context: createProps(Object, () => undefined),
  subForm: createProps(Object, () => undefined),
  container: createProps(Object, () => undefined),
  expanded: createProps(Boolean),
});
const emits = defineEmits(['addNew'])
const clearButton = computed(() => {
  return true;
});
const showAddNewButton = computed(() => {
  return true;
});

function clear(e) {
  e.stopPropagation();
  emits('clear');
}

function addNew(e) {
  e.stopPropagation();
  emits('addNew');
}

function change(v) {
  isFixed.value = v;
}
</script>
<style scoped lang="less">
.sub-table-healder-fixed {
  background: white;
  box-shadow: 0 2px 4px 0 var(--van-gray-3), 0 2px 4px 0 var(--van-gray-3);
}

.sub-table-healder {
  padding: 0.1rem;
}

.sub-table-healder .arrow-icon {
  transition: transform 0.5s ease;
}

.arrow-icon-expanded {
  transform: rotate(180deg);
}

.sub-table-healder-button-wrapper > * {
  margin-left: 10px;
}
</style>